<template>
	<view class="picture-frame">
		<view class="submit-container">
			<el-form :model="pictureFrame" ref="form" v-loading="uploading">
				<el-form-item label="图片分类" prop="title" label-width="100px">
					<el-select v-model="pictureFrame.category" placeholder="请选择">
					    <el-option
					      v-for="item in categoryList"
					      :key="item.name"
					      :label="item.name"
					      :value="item.name">
					    </el-option>
					  </el-select>
				</el-form-item>
				<el-form-item label="头像框" label-width="100px" style="margin-bottom: 0;">
					<div class="image-box" v-if="pictureFrame.image">
						<image class="image" :src="pictureFrame.image" mode="aspectFit"></image>
						<i class="el-icon-delete-solid" @click="deleteImage"></i>
					</div>
					<i v-else class="el-icon-plus image-uploader-icon upload-icon" @click="uploadImage"></i>
				</el-form-item>
			</el-form>
			<el-button type="primary" @click="submitForm()">确 定</el-button>
		</view>
		<view class="frame-list">
			<view class="frame-item" v-for="(item, index) in pictureFrameList" :key="index"
				@tap="deleteFrame(item._id, item.image)"
			>
				<image :src="item.image" mode="aspectFit"></image>
				<view class="cate">
					{{item.category}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '',
				pictureFrame: {
					category: '',
					image: ''
				},
				loading: false,
				categoryList: [],
				pictureFrameList: []
			}
		},
		computed: {
			uploading() {
				return this.loading;
			}
		},
		onLoad() {
			this.getCategory()
			this.getpictureFrame()
		},
		methods: {
			deleteFrame(id, image) {
				uni.showModal({
					title: '提示',
					content: '确定要删除嘛',
					success: (res) => {
						if(res.confirm) {
							this.$db('remove', 'picture_frame', {
								doc: id
							}).then(res => {
								this.$remove(image).then(res => {
									console.log(res)
									uni.hideLoading()
								})
							})
						}
					}
				})
			},
			getCategory() {
				this.$db('query', 'picture_category', {
					queryItem: {
						order: ['cid', 'asc']
					}
				}).then(res => {
					console.log(res)
					this.categoryList = res.result.data
				})
			},
			getpictureFrame() {
				this.$db('query', 'picture_frame', {
					queryItem: {
						limit: 1000
					}
				}).then(res => {
					this.pictureFrameList = res.result.data
				})
			},
			uploadImage() {
				uni.chooseImage({
					count: 1,
					success: res => {
						console.log(res);
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0]
							let cloudPath = res.tempFiles[0].name
							//进行上传操作

							// callback方式，与promise方式二选一即可
							uniCloud.uploadFile({
								filePath: filePath,
								cloudPath: cloudPath,
								onUploadProgress: function(progressEvent) {
									console.log(progressEvent);
									var percentCompleted = Math.round(
										(progressEvent.loaded * 100) / progressEvent.total
									);
								},
								success: (res) => {
									this.pictureFrame.image = res.fileID
									console.log(this.pictureFrame.image)
								},
								fail: (err) => {
									console.log(err)
								},
								complete() {}
							});

						}
					}
				});
			},
			submitForm() {
				console.log(this.pictureFrame)
				this.$db('add', 'picture_frame', {
					data: this.pictureFrame
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '添加成功'
					})
					console.log(res)
					this.pictureFrame.category = '',
					this.pictureFrame.image = ''
				})
				// const res = await this.$db('query', 'rank', {
				// 	queryItem: {
				// 		where: {
				// 			nickname: '觅兔先生'
				// 		}
				// 	}
				// })
				// uniCloud.callFunction({
				// 	name: 'db',
				// 	data: {
						
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit-container{
		width: 900rpx;
		margin: 100rpx auto 0;
	}
	.image{
		display: block;
		width: 200rpx;
		height: 200rpx;
		background-color: #f5f5f5;
	}
	.upload-icon{
		width: 200rpx;
		height: 200rpx;
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.frame-list{
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
		background-color: #f5f5f5;
		.frame-item{
			margin: 20rpx;
		}
		.cate{
			text-align: center;
		}
	}
</style>
